<template>
  <div class="djpay">
    <div class="container">
      <div class="title">
        <p>付费精品</p>
      </div>
      <div class="list">
        <div class="li" v-for="(item, index) in list" :key="index" @click="toPayDetail(item.id)">
          <div class="img">
            <img :src="item.picUrl" />
            <span class="tag">付费精品</span>
          </div>
          <div class="right">
            <span class="name">{{ item.name }}</span>
            <span class="rcmdtext">{{ item.rcmdText }}</span>
            <span class="lastProgramName">{{ item.lastProgramName }}</span>
            <span class="price">￥{{ item.originalPrice / 100 }}</span>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { getDjPaygiftList } from '../../../network/dj.js'
export default {
  data () {
    return {
      limit: 50,
      list: []
    }
  },
  methods: {
    toPayDetail (id) {
      this.$router.push('/pay_detail/' + id)
    },
    getDjPaygiftList (limit) {
      getDjPaygiftList(limit).then(res => {
        // console.log(res.data)
        this.list = res.data.data.list
        // console.log(this.list)
      })
    }
  },
  created () {
    this.getDjPaygiftList(this.limit)
  }
}
</script>

<style lang="less" scoped>
  .djpay {
    width: 82%;
    overflow: auto;
    .container {
      width: 95%;
      margin: 20px auto;
      .title {
        padding-bottom: 10px;
        border-bottom: 1px solid #e1e1e2;
        display: flex;
        align-items: flex-end;
        justify-content: space-between;
        p {
          font-size: 20px;
        }
      }
      .list {
        width: 100%;
        margin: 0 auto 20px;
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        justify-content: space-between;
        .li {
          width: 48%;
          padding: 10px 0;
          border-bottom: 1px solid #efefef;
          display: flex;
          justify-content: flex-start;
          cursor: pointer;
          .img {
            position: relative;
            width: 25%;
            img {
              width: 100%;
            }
            .tag {
              position: absolute;
              top: 0;
              left: 0;
              color: #fff;
              width: 50%;
              height: 20px;
              font-size: 14px;
              padding: 2px;
              background-color: #d33a31;
              border-bottom-right-radius: 10px;
            }
          }
          .right {
            width: 70%;
            padding-left: 10px;
            display: flex;
            flex-direction: column;
            justify-content: flex-start;
            span {
              text-align: left;
              overflow: hidden;
              text-overflow: ellipsis;
              white-space: nowrap;
            }
            .name {
              font-size: 17px;
              padding: 5px 0;
            }
            .rcmdtext, .lastProgramName {
              color: #999999;
              font-size: 15px;
              padding: 5px 0;
            }
            .price {
              color: #44aaf8;
              font-size: 17px;
              padding-top: 5px;
            }
          }
        }
      }
    }
  }
</style>
